// 1. 双斜杠注释，不会被编译
/*
多行注释
会被编译
*/

// 2. 变量
// 单值变量
// $c: yellow;
// .box1{
//     color: $c;
// }
// .box2{
//     background-color: $c;
// }

// 多值变量（类似于js的一维数组）
// $c: red green yellow;
// .box1{
//     color: nth($c, 1);
// }
// .box2{
//     color: nth($c, 2);
// }

// 复杂变量（类似js的多维数组）
// $l:(box1, 100px, 20px)(box2, 200px, 30px)(box3, 300px, 40px);
// @each $a,$b,$c in $l {
//     ##{$a}{
//         width: $b;
//         height: $c;
//     }
// }
// $m:(h1:30px,h2:20px,h3:12px);
// @each $a,$b in $m {
//     #{$a}{
//         font-size: $b;
//     }
// }

// 3. 嵌套
// 选择器嵌套：
// .box{
//     background:#ccc;
//     .msg{
//         width:400px;
//         h3{
//             span{
//                 font-size:12px;
//             }
//             &:hover{
//                 background:pink
//             }
//             >em{
//                 color:red
//             }
//             &.active{
//                 color:yellow
//             }
//         }
//     }
// }

// 属性嵌套：一般用于复合属性
// .box{
//     border:{
//         left:solid 1px black;
//         right:{
//             style:solid
//         }
//     }
//     background:{
//         color: red;
//         image:url();
//         position:100px 200px;
//     }
//     background-position:100px 20px;
//     background: red;
//     font:{
//         size:10px;
//         weight:normal;
//     }
// }

// 4. 混合（代码块）
// 没有返回值，一般用户重复的代码块
// @mixin ellipsis($px){
//     width: $px;
//     overflow: hidden;
//     text-overflow: ellipsis;
//     white-space: nowrap;
// }
// .box1{
//     @include ellipsis(100px);
// }
// .box2{
//     @include ellipsis(200px);
// }
// .box3{
//     @include ellipsis(300px);
// }

// 5. 运算
// html{
//     font-size: 16px;
// }
// .box1{
//     width: 894px / 16px * 1rem;
// }
// .box2{
//     width: 894px / 16px * 1em;
// }
// .box3{
//     width: 894px / 16px * 100%;
// }
// .box4{
//     color: yellow + 100;
// }

// 6. 函数
// 有返回值，一般用于计算
// $fs: 20px;
// html{
//     font-size: $fs;
// }
// @function ptr($px){
//     @return $px / $fs * 1rem
// }
// .box1{
//     width: ptr(89px);
//     height: ptr(73px);
// }

// 7. 继承
// .box1{
//     width:100px;
//     height:100px;
//     background: red;
// }
// .box2{
//     @extend .box1;
//     width:200px;
// }

// 8. 导入外部scss文件（合并后再解析）
// scss的模块化
@import "./_style.scss";


